<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="my portfolio website to showcase the work I have done so far, the services I provide and all my professionals life.">

    <!-- meta tag to rank our website (SEO) -->

    <meta name="keywords" content="HTML, CSS, JavaScript,portfolio">
    <meta name="author" content="Kedar Rothe">
    <title>Contact Page</title>
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="icon" href="images/favicon.ico?v=2">

</head>

<body>

    <header class="header ">
        <img src="images/logo1.png" alt="This is logo image" class="logo">

        <nav class="navbar">
            <ul class="navbar-lists">
                <li><a href="index.html" class="navbar-link  home-link">Home</a></li>
                <li><a href="about.html" class="navbar-link  about-link">About</a></li>
                <li><a href="service.html" class="navbar-link  service-link">Skills</a></li>
                <li><a href="#" class="navbar-link  portfolio-link">portfolio </a></li>
                <li><a href="contact.html" class="navbar-link  contact-link">Contact</a></li>
            </ul>
        </nav>


        <!-- responsive navbar -->
        <div class="mobile-navbar-btn">
            <ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>
            <ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon>
        </div>

    </header>

    <!-- ==============================================================
         Contact us section
=============================================================  -->

    <section class="section section-contact">
        <div class="container">
            <h2 class="common-heading">Contact Us</h2>
        </div>

        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15941.630448243073!2d73.88343850719455!3d18.457932970983663!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2ebdd5dc8627b%3A0x4ed8e1cd84eec7c4!2sVIIT%20College%20Back%20Gate!5e0!3m2!1sen!2sin!4v1680432499976!5m2!1sen!2sin"
            width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>

        <div class="section-contact-main contact-container">
            <form action="https://formspree.io/f/xjvdaeor" method="POST">
                <div class="grid grid-two-column">
                    <div>
                        <label for="username"></label>
                        <input type="text" name="username" placeholder="Username" id="username" required
                            autocomplete="off">
                    </div>
                    <div>
                        <label for="email"></label>
                        <input type="email" placeholder="demo@gmail.com" name="email" id="email" required
                            autocomplete="off">
                    </div>
                </div>

                <div>
                    <label for="subject"></label>
                    <input type="text" name="subject" placeholder="subject" id="subject" required autocomplete="off">
                </div>
                <div>
                    <label for="textarea"></label>
                    <textarea name="Message" id="textarea" cols="30" rows="10" required placeholder="Message"
                        autocomplete="off"></textarea>
                </div>
                <div>
                    <input type="submit" value="Send Message" class="btn">
                </div>
            </form>
        </div>
    </section>

    <!-- ==============================================================
         Footer section
=============================================================  -->
    <footer class="section-footer section">
        <div class="container grid grid-four-column">
            <div class="f-about">
                <h3>About</h3>
                <p>As a student, my focus is on learning as much as I can and gaining practical experience through
                    internships and personal projects. I'm constantly experimenting with new technologies..</p>
            </div>
            <!-- end -->
            <div class="f-link">
                <h3>Links</h3>
                <ul>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Portfolio</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Contact</a>
                    </li>

                </ul>
            </div>

            <!-- end -->

            <div class="f-services">
                <h3>Services</h3>
                <ul>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Web Design</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Web Development</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Mern Project</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">DSA</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Packet Tracer</a>
                    </li>
                </ul>
            </div>
            <!-- end -->

            <div class="f-address">
                <h3>Have a Question?</h3>
                <address>
                    <div>
                        <p><span><ion-icon name="location-outline"></ion-icon></span>
                            Pune, India
                        </p>
                    </div>
                </address>

                <div>
                    <p><span><ion-icon name="call-outline"></ion-icon></span>
                        <a href="tel:+917498489467">+91 7498489467</a>
                    </p>
                </div>

                <div>
                    <p><span><ion-icon name="mail-outline"></ion-icon></span>
                        <a href="mailto:kedarrothe05@gmail.com ">kedarrothe05@gmail.com</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="f-social-icons">
                <a href="https://instagram.com/rothe_kedar?igshid=ZDdkNTZiNTM=" target="_blank">
                    <ion-icon class="icons" name="logo-instagram"></ion-icon>
                </a>
                <a href="https://wa.me/7498489867" target="_blank">
                    <ion-icon class="icons" name="logo-whatsapp"></ion-icon>
                </a>
                <a href="https://www.linkedin.com/in/keadarnath-rothe-a39316258/" target="_blank">
                    <ion-icon class="icons" name="logo-linkedin"></ion-icon>
                </a>

                <div class="f-credits">
                    <p>
                        Copyright ©2023 All rights reserved | This template is made with ❤ by Kedar Rothe
                    </p>
                </div>
            </div>
        </div>
    </footer>


    <script src="/index.js"></script>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</body>

</html>